<template>
  <div class="app-container">
    <div class="back">
      <!-- 查询条件 -->
      <div class="search-box m-t-10 m-b-10">
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item label="模糊查询">
            <el-input placeholder="请输入" clearable style="width: 140px" />
          </el-form-item>
          <el-form-item label="到期时间">
            <el-date-picker
              v-model="range"
              type="daterange"
              range-separator="-"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary">
              <el-icon><Search /></el-icon>
              &nbsp;查询
            </el-button>
            <el-button>
              <el-icon><RefreshRight /></el-icon>
              &nbsp;重置
            </el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="data-show">
        <div class="title-box">
          <span class="title">全部通知(0)</span>
          <span class="btn">全部已读</span>
        </div>
        <!-- 表格 -->
        <div class="table-box">
          <el-table
            :data="tableData"
            :cell-style="{ textAlign: 'center' }"
            :header-cell-style="{ textAlign: 'center' }"
            class="my-custom-table"
          >
            <el-table-column prop="index" label="序号" />
            <el-table-column prop="title" label="标题" />
            <el-table-column prop="content" label="内容" />
            <el-table-column prop="type" label="类型" />
            <el-table-column prop="source" label="来源" />
            <el-table-column prop="publish" label="发布时间" />
            <el-table-column prop="status" label="状态">
              <template #default="{ row }">
                <span :class="{ unclaimed: row.status === '未读' }">{{ row.status }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="control" label="操作">
              <template #default="{ row }">
                <el-button type="text" @click="toDetail(row)">查看</el-button>
                <el-button type="text" style="color: #eb4d2a">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <Pagination :total="total" :page="page" :limit="size" />
        </div>
      </div>
    </div>
    <viewNotice ref="viewNoticeRef" />
  </div>
</template>
<script lang="ts" setup>
import viewNotice from "./components/viewNotice.vue";

const viewNoticeRef = ref();
const range = ref("");
const total = ref(2);
const size = ref(10);
const page = ref(1);
const tableData = ref([
  {
    index: 1,
    title: "标题标题标题标题",
    content: "内容内容内容内容",
    type: "类型",
    source: "平台",
    publish: "2025-2-18 15:00:00",
    status: "未读",
    control: "",
  },
  {
    index: 1,
    title: "标题标题标题标题",
    content: "内容内容内容内容",
    type: "类型",
    source: "平台",
    publish: "2025-2-18 15:00:00",
    status: "已读",
    control: "",
  },
  {
    index: 1,
    title: "标题标题标题标题",
    content: "内容内容内容内容",
    type: "类型",
    source: "平台",
    publish: "2025-2-18 15:00:00",
    status: "已读",
    control: "",
  },
]);

//查看通知详情弹窗
const toDetail = (row: any) => {
  viewNoticeRef.value.show(row);
};
</script>
<style lang="scss" scoped>
.back {
  width: 100%;
  height: calc(100vh - 114px);
  overflow: hidden;
  background: linear-gradient(180deg, #f0f5ff 0%, #fbfcfe 100%);
  border-radius: 20px;
  box-shadow:
    0px 4px 8px 0px #eaf0ff,
    inset 2px 1px 2px 1px #ffffff;
  padding: 0;
  //搜索框
  .search-box {
    padding: 35px 25px;
    border-bottom: 2px solid #ffffff;
  }
  .data-show {
    padding: 25px;
    .title-box {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 13px;
      .title {
        font-weight: bold;
      }
      .btn {
        border: 1px solid #4080ff;
        padding: 8px 12px;
        border-radius: 4px;
        color: #4080ff;
      }
    }
  }
  .table-box {
    .el-table {
      height: calc(100vh - 400px);
    }
    .el-scrollbar {
      height: auto;
    }
    .unclaimed {
      color: #ed9300 !important;
    }
  }
}
.mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9;
  .tips {
    width: 30%;
    box-sizing: border-box;
    border-radius: 8px;
    background-color: #fff;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    padding: 40px 0;
    text-align: center;
  }
}
</style>
